<template>
    <a-row style="height: 100%;">
        <a-col :span="4" style="height: 100%;">
            <div class="max" style="box-shadow: 8px 4px 24px 0px rgba(0, 0, 0, 0.03);">
                <div class="header" style="text-align: center;height: 18vh;">
                    <div class="logo">
                        <img src="@/assets/static/images/logo.png" alt="">
                    </div>
                </div>
                <div class="content" style="height: 82vh;">
                    <a-menu class="max" @menu-item-click="goto">
                        <a-menu-item key="/manage/index">
                            <template #icon>
                                <icon-home :size="20" />
                            </template>
                            首页
                        </a-menu-item>
                        <a-menu-item key="/manage/outNote">
                            <template #icon>
                                <icon-export :size="20" />
                            </template>
                            出库记录
                        </a-menu-item>
                        <a-menu-item key="/manage/inNote">
                            <template #icon>
                                <icon-import :size="20" />
                            </template>
                            入库记录
                        </a-menu-item>
                        <a-menu-item key="/manage/bank">
                            <template #icon>
                                <icon-code-sandbox :size="20" />
                            </template>
                            物品库存
                        </a-menu-item>
                        <a-menu-item key="/manage/goodsConfig">
                            <template #icon>
                                <icon-settings :size="20" />
                            </template>
                            物品配置
                        </a-menu-item>
                        <a-menu-item key="/manage/about">
                            <template #icon>
                                <icon-user :size="20" />
                            </template>
                            关于我们
                        </a-menu-item>

                    </a-menu>
                </div>
            </div>
        </a-col>
        <a-col :span="20" style="height: 100%;">
            <div class="max">
                <div class="header">
                    <a-row justify="space-around" style="height: 100%;">
                        <a-col :span="18" style="height: 100%;">
                            <div class="headerTitle">
                                当前位置：首页
                            </div>
                        </a-col>
                        <a-col :span="4" style="height: 100%;">
                            <div class="User">
                                <div>
                                    <a-avatar>
                                        灰色与淸
                                    </a-avatar>
                                </div>
                                <div style="margin-left: 10px;color: rgba(76, 92, 130, 1);">
                                    Admin
                                </div>
                                <div class="logout">
                                    <div style="height: 24px;width: 24px;">
                                        <a-popover position="left">
                                            <a-button shape="circle" @click="logout">
                                                <icon-poweroff :size="24" style="color: red" />
                                            </a-button>
                                            <template #content>
                                                <p style="color: red;">
                                                    点击退出登录
                                                </p>
                                            </template>
                                        </a-popover>

                                    </div>
                                </div>
                            </div>
                        </a-col>
                    </a-row>

                </div>
                <div class="content" style="background-color: rgba(235, 236, 237, 1);overflow: hidden;">
                    <router-view>
                    </router-view>
                </div>
            </div>
        </a-col>
    </a-row>
</template>
<script setup>
import { useRouter } from "vue-router"
import { Notification } from '@arco-design/web-vue';
const route = useRouter()
function goto(url) {
    route.push(url)
}
function logout() {
    localStorage.removeItem("token")
    Notification.error({
        title: '系统提示',
        content: '您已退出登录！',
        closable: true,
    })
    route.push("/login")
}
</script>
<style scoped>
.max {
    height: 100%;
    width: 100%;
}

.header {
    height: 10vh;
    width: 100%;
    overflow: hidden;

}

.content {
    height: 90vh;
    width: 100%;

}

.headerTitle {
    line-height: 15vh;
    color: rgb(151, 176, 216);
}

.User {
    display: flex;
    height: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.logout {
    margin-left: 20px;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.logo {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
</style>